<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app1"></div>
  <div id="app2"></div>
  <div id="app3"></div>

  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>
  <script src="../js/prop-types.js"></script>

  <script type="text/babel">
    class Person extends React.Component {
      render() {
        const { name, age, sex } = this.props
        return (
          <ul>
            <li>姓名：{name}</li>
            <li>性别：{sex}</li>
            <li>年龄：{age + 1}</li>
          </ul>
        )
      }
    }
    // 设置标签类型 必要性
    Person.propTypes={
      name:PropTypes.string.isRequired,
      sex:PropTypes.string
    }
    // 设置默认的标签属性值
    Person.defaultProps={
      sex:'人妖'
    }
    ReactDOM.render(<Person name="zhangs" age={18} />, document.getElementById("app1"))
    ReactDOM.render(<Person name="lucy" age={8} sex="女" />, document.getElementById("app2"))
    const p = { name: "100", age: 25, sex: '男' }
    ReactDOM.render(<Person {...p} />, document.getElementById("app3"))

  </script>
</body>

</html>